<template>
  <div class="visualization" ref="clear" :style="{ width: clearWindow.width + 'px', height: clearWindow.height + 'px' }"></div>
</template>

<script setup lang="ts">
import * as THREE from 'three';
import { onMounted, reactive, ref } from 'vue';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { Workpiece } from '../utils/workpiece';
import { Tool } from '../utils/tool';

let clear = ref();
// 定义 canvas 窗口宽高
let clearWindow = reactive({
    width: 1000,
    height: 800
});

// 创建场景
const scene = new (THREE as any).Scene();
scene.background = new (THREE as any).Color(0xffffff);

//辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true,
});
renderer.setSize(clearWindow.width, clearWindow.height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0xffffff, 1);

// 创建相机
let cameraInfo = {
    position: {
        x: -200,
        y: 100,
        z: 200,
    },
};
const camera = new (THREE as any).PerspectiveCamera(45, clearWindow.width / clearWindow.height, 0.1, 1000);
const bestLength = 30;
camera.position.x = cameraInfo.position.x;
camera.position.y = cameraInfo.position.y;
camera.position.z = cameraInfo.position.z;
camera.lookAt(0, 0, 0);

// 轨道滑动器
const controls = new OrbitControls(camera, renderer.domElement); //轨道滑动器
controls.enableDamping = true;  // 设置带阻尼的惯性
controls.dampingFactor = 0.1; // 设置阻尼系数
controls.rotateSpeed = 0.14; // 旋转速度

// 创建灯光
const createLight = (x: number, y: number, z: number) => {
    const color = 0xffffff; //  灯光颜色
    const intensity = 1; // 灯光强度
    const light = new (THREE as any).DirectionalLight(color, intensity);
    light.position.set(x, y, z);
    light.target.position.set(0, 0, 0);
    return light;
};
const lights = [
    createLight(bestLength, bestLength, -bestLength),
    createLight(-bestLength, bestLength, -bestLength),
    createLight(-bestLength, bestLength, bestLength),
    createLight(-bestLength, -bestLength, bestLength),
    createLight(bestLength, -bestLength, -bestLength),
    createLight(-bestLength, -bestLength, -bestLength),
    createLight(-bestLength, -bestLength, bestLength),
    createLight(bestLength, -bestLength, bestLength),
];
lights.forEach((light) => scene.add(light));
lights.forEach((light) => scene.add(light.target));

const workpiece = new Workpiece(100, 100, 25, 0.2);
const tool = new Tool(50, 50, 10, 5, true);

function animate() {
  requestAnimationFrame(animate);
  tool.posX = 50 + Math.sin(Date.now() * 0.001) * 20;
  tool.posY = 50 + Math.cos(Date.now() * 0.001) * 20;
  workpiece.cut(tool);
  workpiece.update();
  renderer.render(scene, camera);
}

function init(){
  animate();
}
onMounted(() => {
  if (clear.value) {
    clear.value.appendChild(renderer.domElement); // 添加渲染器到容器中
    init();
  }
});
</script>

<style lang="less">
.visualization {
    border: 1px solid #ccc;
    margin: 10px;
}
</style>
